<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios 发起 POST 请求</title>
    <link href="../image/favicon.ico" rel="shortcut icon">
</head>
<body>

   <button id="btnPost"> 发起 POST 请求 </button>
   <button id="btnGet"> 发起 GET 请求 </button>

   <script src="../lib/axios.js"></script>
   <script>
       document.getElementById('btnPost').addEventListener('click', async function (){
           // 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await
           // await 只能用在被 async “修饰”的方法中
           const {data} = await axios({
               methods: 'POST',
               url: 'http://www.liulongbin.top:3006/api/getbooks',
               data: {
                   name:'zs',
                   age: 20,
               }
           })
           console.log(data)
       })

       document.getElementById('btnGet').addEventListener('click',async function (){
           // 解构赋值的时候,使用 : 进行重命名
           // 1.  axios 之后,使用 async/await 进行简化
           // 2.  使用解构赋值,从 axios 封装的大对象中,把 data 属性解构出来
           // 3.  把解构出来的 data 属性,使用 : 进行重命名, 一般重命名为 { data : res }
           const {data : res} = await axios({
               methods: 'GET',
               url:'http://www.liulongbin.top:3006/api/getbooks',
           })
           console.log(res.data)
       })
   </script>
</body>
</html>